<template>
  <Page title="推广奖励结算系统 - 二级分销" class="bg-gradient-to-br from-[#f8f9fa] to-[#eef2f7] min-h-screen p-[15rpx]">
    <view class="container max-w-[750rpx] mx-auto">
      <!-- 用户信息头部 -->
      <view class="header flex items-center justify-between py-[20rpx] mb-[15rpx]">
        <view class="user-info flex items-center">
          <view class="user-avatar w-[50rpx] h-[50rpx] rounded-full bg-gradient-to-br from-[#3498db] to-[#2980b9] text-white flex items-center justify-center text-[20rpx] font-bold mr-[15rpx]">
            张
          </view>
          <view>
            <view class="user-name font-semibold mb-[5rpx]">张推广员</view>
            <view class="user-id text-[12rpx] text-[#6c757d]">ID: PRO123456</view>
          </view>
        </view>
        <view class="wallet-balance bg-white px-[15rpx] py-[8rpx] rounded-[20rpx] shadow-[0_2rpx_8rpx_rgba(0,0,0,0.1)] font-semibold text-[#f39c12]">
          <IconFont name="icon-wallet" class="mr-[5rpx]" /> ¥1,245.80
        </view>
      </view>

      <!-- 统计卡片 -->
      <view class="stats-cards grid grid-cols-3 gap-[12rpx] mb-[20rpx]">
        <view 
          v-for="(stat, index) in stats" 
          :key="index" 
          class="stat-card bg-white rounded-[12rpx] p-[15rpx] text-center shadow-[0_3rpx_10rpx_rgba(0,0,0,0.05)]"
        >
          <view class="stat-value text-[24rpx] font-bold mb-[5rpx]" :class="stat.colorClass">
            {{ stat.value }}
          </view>
          <view class="stat-label text-[12rpx] text-[#6c757d]">
            {{ stat.label }}
          </view>
        </view>
      </view>

      <!-- 推广链接区域 -->
      <view class="section bg-white rounded-[16rpx] p-[20rpx] shadow-[0_4rpx_15rpx_rgba(0,0,0,0.06)] mb-[20rpx]">
        <view class="section-title flex items-center justify-between mb-[20rpx] pb-[10rpx] border-b border-[#e0e0e0]">
          <view class="flex items-center">
            <IconFont name="icon-link" class="mr-[10rpx] text-[#3498db]" />
            <text class="text-[18rpx] font-semibold">我的推广链接</text>
          </view>
        </view>

        <view class="referral-link bg-[#f1f9ff] rounded-[12rpx] p-[15rpx] flex items-center mb-[15rpx]">
          <IconFont name="icon-link" />
          <view class="link-text flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[14rpx] text-[#6c757d] px-[10rpx]">
            https://platform.com/ref?u=PRO123456
          </view>
          <nut-button 
            class="copy-btn bg-[#3498db] text-white border-none rounded-[8rpx] px-[15rpx] py-[8rpx] text-[14rpx]"
            @click="handleCopyLink"
          >
            复制链接
          </nut-button>
        </view>

        <!-- 分享按钮 -->
        <view class="share-buttons grid grid-cols-4 gap-[10rpx]">
          <view 
            v-for="(share, index) in shares" 
            :key="index" 
            class="share-btn flex flex-col items-center justify-center bg-white border border-[#e0e0e0] rounded-[10rpx] p-[12rpx_5rpx] text-[12rpx] text-[#343a40] cursor-pointer transition-all duration-300 hover:border-[#3498db] hover:text-[#3498db]"
            @click="handleShare(share.platform)"
          >
            <IconFont :name="share.icon" class="text-[20rpx] mb-[5rpx]" />
            <text>{{ share.platform }}</text>
          </view>
        </view>
      </view>

      <!-- 会员列表区域 -->
      <view class="section bg-white rounded-[16rpx] p-[20rpx] shadow-[0_4rpx_15rpx_rgba(0,0,0,0.06)] mb-[20rpx]">
        <view class="section-title flex items-center justify-between mb-[20rpx] pb-[10rpx] border-b border-[#e0e0e0]">
          <view class="flex items-center">
            <IconFont name="icon-users" class="mr-[10rpx] text-[#3498db]" />
            <text class="text-[18rpx] font-semibold">我的会员</text>
          </view>
        </view>

        <!-- 会员标签切换 -->
        <view class="tabs flex bg-[#f1f5f9] rounded-[12rpx] p-[5rpx] mb-[20rpx]">
          <view 
            v-for="tab in memberTabs" 
            :key="tab.type"
            class="tab flex-1 text-center py-[10rpx] rounded-[8rpx] font-medium cursor-pointer transition-all duration-300"
            :class="{ 'active bg-white shadow-[0_2rpx_6rpx_rgba(0,0,0,0.1)] text-[#3498db]': activeTab === tab.type }"
            @click="activeTab = tab.type"
          >
            {{ tab.name }}
          </view>
        </view>

        <!-- 一级会员列表 -->
        <view class="members-list max-h-[300rpx] overflow-y-auto" v-if="activeTab === 'level1'">
          <view 
            v-for="(member, index) in members.level1" 
            :key="index" 
            class="member-item flex items-center py-[15rpx] border-b border-[#e0e0e0]"
          >
            <view class="member-avatar w-[40rpx] h-[40rpx] rounded-full bg-[#e0e7ff] text-[#3498db] flex items-center justify-center text-[16rpx] font-bold mr-[15rpx]">
              {{ member.avatar }}
            </view>
            <view class="member-info flex-1">
              <view class="member-name font-medium mb-[3rpx]">
                {{ member.name }}
                <text class="level-badge level-1 ml-[5rpx] inline-block px-[8rpx] py-[2rpx] rounded-[10rpx] text-[10rpx] font-medium bg-[#dbeafe] text-[#3b82f6]">
                  一级
                </text>
              </view>
              <view class="member-meta flex text-[12rpx] text-[#6c757d]">
                <text class="mr-[15rpx] flex items-center">
                  <IconFont name="icon-calendar" class="mr-[3rpx] text-[10rpx]" /> {{ member.date }}
                </text>
                <text class="flex items-center">
                  <IconFont name="icon-shopping-cart" class="mr-[3rpx] text-[10rpx]" /> 消费 {{ member.consumption }}
                </text>
              </view>
            </view>
            <view class="member-amount font-semibold text-[#27ae60]">
              {{ member.commission }}
            </view>
          </view>
        </view>

        <!-- 二级会员列表 -->
        <view class="members-list max-h-[300rpx] overflow-y-auto" v-if="activeTab === 'level2'">
          <view 
            v-for="(member, index) in members.level2" 
            :key="index" 
            class="member-item flex items-center py-[15rpx] border-b border-[#e0e0e0]"
          >
            <view class="member-avatar w-[40rpx] h-[40rpx] rounded-full bg-[#ede9fe] text-[#8b5cf6] flex items-center justify-center text-[16rpx] font-bold mr-[15rpx]">
              {{ member.avatar }}
            </view>
            <view class="member-info flex-1">
              <view class="member-name font-medium mb-[3rpx]">
                {{ member.name }}
                <text class="level-badge level-2 ml-[5rpx] inline-block px-[8rpx] py-[2rpx] rounded-[10rpx] text-[10rpx] font-medium bg-[#ede9fe] text-[#8b5cf6]">
                  二级
                </text>
              </view>
              <view class="member-meta flex text-[12rpx] text-[#6c757d]">
                <text class="mr-[15rpx] flex items-center">
                  <IconFont name="icon-calendar" class="mr-[3rpx] text-[10rpx]" /> {{ member.date }}
                </text>
                <text class="flex items-center">
                  <IconFont name="icon-shopping-cart" class="mr-[3rpx] text-[10rpx]" /> 消费 {{ member.consumption }}
                </text>
              </view>
            </view>
            <view class="member-amount font-semibold text-[#27ae60]">
              {{ member.commission }}
            </view>
          </view>
        </view>
      </view>

      <!-- 提现区域 -->
      <view class="withdraw-card bg-gradient-to-br from-[#4facfe] to-[#00f2fe] rounded-[16rpx] p-[20rpx] text-white mb-[20rpx]">
        <view class="withdraw-title text-[18rpx] font-semibold mb-[15rpx] flex items-center">
          <IconFont name="icon-money" class="mr-[10rpx]" />
          <text>推广奖励提现</text>
        </view>

        <view class="withdraw-amount text-[32rpx] font-bold mb-[20rpx] text-center">
          ¥1,245.80
        </view>

        <view class="withdraw-form bg-[rgba(255,255,255,0.2)] rounded-[12rpx] p-[15rpx] mb-[20rpx]">
          <view class="form-group mb-[15rpx]">
            <view class="form-label block mb-[8rpx] font-medium">提现金额</view>
            <nut-input 
              v-model="withdrawAmount"
              class="form-control w-full px-[15rpx] py-[12rpx] border-none rounded-[10rpx] bg-[rgba(255,255,255,0.9)] text-[16rpx]"
              placeholder="输入提现金额"
              type="number"
            />
          </view>

          <view class="form-group mb-[15rpx]">
            <view class="form-label block mb-[8rpx] font-medium">提现到微信</view>
            <view class="form-control w-full px-[15rpx] py-[12rpx] border-none rounded-[10rpx] bg-[rgba(255,255,255,0.9)] text-[16rpx]">
              微信账号: wechat_zhang123 (已绑定)
            </view>
          </view>

          <view class="amount-options flex flex-wrap gap-[10rpx] my-[15rpx]">
            <view 
              v-for="(amount, index) in amountOptions" 
              :key="index" 
              class="amount-option flex-1 min-w-[80rpx] bg-[rgba(255,255,255,0.2)] rounded-[8rpx] p-[10rpx] text-center cursor-pointer transition-all duration-300 border border-transparent"
              :class="{ 'selected bg-white text-[#3498db] font-semibold border-white': selectedAmount === amount }"
              @click="handleSelectAmount(amount)"
            >
              {{ amount }}
            </view>
          </view>

          <nut-button 
            class="btn btn-primary w-full py-[14rpx] rounded-[12rpx] border-none text-[16rpx] font-semibold bg-white text-[#3498db] shadow-[0_4rpx_15rpx_rgba(0,0,0,0.1)]"
            @click="handleWithdraw"
          >
            立即提现
          </nut-button>
          <view class="note text-center mt-[10rpx] text-[12rpx]">
            单笔最低提现¥100，24小时内到账
          </view>
        </view>
      </view>

      <!-- 提现记录 -->
      <view class="section bg-white rounded-[16rpx] p-[20rpx] shadow-[0_4rpx_15rpx_rgba(0,0,0,0.06)] mb-[20rpx]">
        <view class="section-title flex items-center justify-between mb-[20rpx] pb-[10rpx] border-b border-[#e0e0e0]">
          <view class="flex items-center">
            <IconFont name="icon-history" class="mr-[10rpx] text-[#3498db]" />
            <text class="text-[18rpx] font-semibold">提现记录</text>
          </view>
        </view>

        <view class="withdraw-history">
          <view 
            v-for="(history, index) in withdrawHistory" 
            :key="index" 
            class="history-item flex justify-between items-center py-[12rpx] border-b border-[#e0e0e0]"
          >
            <view class="history-info flex-1">
              <view class="history-title font-medium mb-[3rpx]">{{ history.title }}</view>
              <view class="history-date text-[12rpx] text-[#6c757d]">{{ history.date }}</view>
            </view>
            <view class="history-amount font-semibold text-[#27ae60]">{{ history.amount }}</view>
            <view class="history-status text-[12rpx] px-[8rpx] py-[3rpx] rounded-[10rpx]" :class="history.statusClass">
              {{ history.status }}
            </view>
          </view>
        </view>
      </view>

      <!-- 提成明细 -->
      <view class="section bg-white rounded-[16rpx] p-[20rpx] shadow-[0_4rpx_15rpx_rgba(0,0,0,0.06)] mb-[20rpx]">
        <view class="section-title flex items-center justify-between mb-[20rpx] pb-[10rpx] border-b border-[#e0e0e0]">
          <view class="flex items-center">
            <IconFont name="icon-invoice" class="mr-[10rpx] text-[#3498db]" />
            <text class="text-[18rpx] font-semibold">提成明细</text>
          </view>
        </view>

        <view class="commission-list max-h-[300rpx] overflow-y-auto">
          <view 
            v-for="(commission, index) in commissions" 
            :key="index" 
            class="commission-item flex justify-between items-center py-[15rpx] border-b border-[#e0e0e0]"
          >
            <view class="commission-detail flex-1">
              <view class="commission-title font-medium mb-[5rpx]">{{ commission.title }}</view>
              <view class="commission-meta text-[12rpx] text-[#6c757d]">{{ commission.meta }}</view>
              <view class="commission-level bg-[#f1f5f9] px-[8rpx] py-[2rpx] rounded-[10rpx] inline-block mt-[5rpx] text-[12rpx]">
                {{ commission.level }}
              </view>
            </view>
            <view class="commission-amount font-semibold text-[#27ae60]">{{ commission.amount }}</view>
          </view>
        </view>
      </view>

      <!-- 页脚 -->
      <view class="footer text-center py-[20rpx] text-[#6c757d] text-[12rpx]">
        <view class="mb-[5rpx]">© 2023 创业服务平台 | 推广奖励系统</view>
        <view>客服电话：400-888-9999 | 工作日 9:00-18:00</view>
      </view>
    </view>
  </Page>
</template>

<script setup>
import { ref } from 'vue'
import { Taro } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { Button as nutButton, Input as nutInput } from '@nutui/nutui-taro'

// 统计数据
const stats = [
  { value: '28', label: '推广会员数', colorClass: 'text-[#3498db]' },
  { value: '¥18,560', label: '消费金额', colorClass: 'text-[#27ae60]' },
  { value: '¥1,856', label: '提成金额', colorClass: 'text-[#9b59b6]' }
]

// 分享平台
const shares = [
  { platform: '微信', icon: 'icon-weixin' },
  { platform: 'QQ', icon: 'icon-qq' },
  { platform: '微博', icon: 'icon-weibo' },
  { platform: '邮箱', icon: 'icon-email' }
]

// 会员标签
const memberTabs = [
  { type: 'level1', name: '一级会员' },
  { type: 'level2', name: '二级会员' }
]
const activeTab = ref('level1')

// 会员数据
const members = {
  level1: [
    { avatar: '李', name: '李小明', date: '2023-06-15', consumption: '¥2,450', commission: '¥245' },
    { avatar: '王', name: '王小红', date: '2023-07-02', consumption: '¥5,200', commission: '¥520' },
    { avatar: '赵', name: '赵小刚', date: '2023-07-22', consumption: '¥1,200', commission: '¥120' }
  ],
  level2: [
    { avatar: '陈', name: '陈小华', date: '2023-06-20', consumption: '¥3,800', commission: '¥114' },
    { avatar: '刘', name: '刘小芳', date: '2023-07-10', consumption: '¥1,500', commission: '¥45' }
  ]
}

// 提现相关
const withdrawAmount = ref('100')
const amountOptions = ['¥100', '¥200', '¥500', '全部']
const selectedAmount = ref('¥200')

// 提现记录
const withdrawHistory = [
  { title: '微信提现', date: '2023-07-25 14:30:22', amount: '-¥500.00', status: '成功', statusClass: 'bg-[#d1fae5] text-[#047857]' },
  { title: '微信提现', date: '2023-07-18 10:15:07', amount: '-¥300.00', status: '成功', statusClass: 'bg-[#d1fae5] text-[#047857]' },
  { title: '微信提现', date: '2023-07-10 16:45:33', amount: '-¥200.00', status: '成功', statusClass: 'bg-[#d1fae5] text-[#047857]' }
]

// 提成明细
const commissions = [
  { title: '李小明 - 网站开发服务', meta: '2023-07-28 10:30:22 | 订单号: ORD202307281030', level: '一级会员 - 10%提成', amount: '+¥245.00' },
  { title: '陈小华 - 设计服务', meta: '2023-07-27 14:15:07 | 订单号: ORD202307271415', level: '二级会员 - 3%提成', amount: '+¥114.00' },
  { title: '王小红 - 咨询服务', meta: '2023-07-25 09:45:33 | 订单号: ORD202307250945', level: '一级会员 - 10%提成', amount: '+¥520.00' }
]

// 处理复制链接
const handleCopyLink = () => {
  Taro.setClipboardData({
    data: 'https://platform.com/ref?u=PRO123456'
  }).then(() => {
    Taro.showToast({
      title: '复制成功',
      icon: 'success',
      duration: 2000
    })
  })
}

// 处理分享
const handleShare = (platform) => {
  Taro.showToast({
    title: `将分享到${platform}`,
    icon: 'none',
    duration: 2000
  })
}

// 选择提现金额
const handleSelectAmount = (amount) => {
  selectedAmount.value = amount
  if (amount === '全部') {
    withdrawAmount.value = '1245.80'
  } else {
    withdrawAmount.value = amount.replace('¥', '')
  }
}

// 处理提现
const handleWithdraw = () => {
  const amount = parseFloat(withdrawAmount.value)
  if (amount < 100) {
    Taro.showToast({
      title: '最低提现金额为¥100',
      icon: 'none',
      duration: 2000
    })
    return
  }

  if (amount > 1245.80) {
    Taro.showToast({
      title: '提现金额不能超过可用余额',
      icon: 'none',
      duration: 2000
    })
    return
  }

  Taro.showModal({
    title: '确认提现',
    content: `确认提现¥${amount.toFixed(2)}到微信账号？`,
    success: (res) => {
      if (res.confirm) {
        Taro.showToast({
          title: `提现申请提交成功！¥${amount.toFixed(2)}将在24小时内到账`,
          icon: 'none',
          duration: 2000
        })
        // 重置表单
        withdrawAmount.value = '100'
        selectedAmount.value = '¥100'
      }
    }
  })
}
</script>